<template>
	<view>
		<view>
			<view class="data" v-if="list == ''">
				<u-empty text="暂无记录" mode="list"></u-empty>
			</view>
			<u-swipe-action :show="item.show" :index="index" 
				v-for="(item, index) in list" :key="item.id" 
				@click="click" @open="open"
				:options="options" disabled="true"
			>
				<view class="item u-border-bottom" @click="goDetail(item.bcode)">
					<image mode="aspectFill" :src="item.product.thumbs_text" />
					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
					<view class="title-wrap">
						<text class="title u-line-2">{{ item.product.name }}</text>
						<text class="title u-line-2">门店： {{ item.store.name }}</text>
						<text class="title u-line-2">预约时间： {{ item.bdate_text }}</text>
					</view>
				</view>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				userInfo: [],
				list: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userData')
			this.userId = this.userInfo.id
			console.log(this.userId)
			this.getUserRecord()
		},
		methods: {
			click(index, index1, code) {
				console.log(index,index1,code)
				// if(index1 == 0) {
				// 	this.list.splice(index, 1);
				// 	console.log(this.list)
				// }
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			},
			getUserRecord() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/booking/Cardserver/record',
					method: 'GET',
					data: {
						busid: this.userId
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.list = res.data.data
					},
				})
			},
			goDetail(code){
				uni.navigateTo({
					url: `/pagesB/yuyuedetail/yuyuedetail?code=`+code
				})
			},
			delRecord() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		padding: 20rpx;
	}
	
	image {
		width: 120rpx;
		height: 120rpx;
		flex: 0 0 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
	
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 5rpx;
	}
	.data {
		margin-top: 100rpx;
	}
</style>
